<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="common.jsp" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>商品管理</title>
    <style>
        /* 隐藏滚动条但可以滚动 */
        body {
            overflow: hidden;
        }
        .container-fluid {
            overflow-y: scroll;
            height: 100vh; /* 高度设置为全屏 */
        }
    </style>
    <script>
        $(document).ready(function() {
            loadProducts(); // 页面加载时加载所有商品数据
        });

        function loadProducts() {
            $.ajax({
                type: 'GET',
                url: '${pageContext.request.contextPath}/product',
                data: {
                    operation: 'getAllProducts'
                },
                dataType: 'json',
                success: function(response) {
                    $('#productTableBody').empty();

                    $.each(response.data, function(index, product) {
                        $('#productTableBody').append(
                            '<tr>' +
                            '<td>' + product.id + '</td>' +
                            '<td>' + product.name + '</td>' +
                            '<td>' + product.description + '</td>' +
                            '<td><img src="' + product.img + '" alt="商品图片" class="img-thumbnail" width="50" height="50"></td>' +
                            '<td>' +
                            '<button onclick="editProduct(' + product.id + ')" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#editProductModal">编辑</button> ' +
                            '<button onclick="deleteProduct(' + product.id + ')" class="btn btn-danger btn-sm">删除</button>' +
                            '</td>' +
                            '</tr>'
                        );
                    });
                },
                error: function(xhr, status, error) {
                    console.error('加载商品数据出错:', error);
                }
            });
        }

        function addProduct() {
            var name = $('#addName').val();
            var description = $('#addDescription').val();
            var img = $('#addImg').val();

            $.ajax({
                type: 'POST',
                url: '${pageContext.request.contextPath}/product',
                data: {
                    operation: 'addProduct',
                    name: name,
                    description: description,
                    img: img
                },
                dataType: 'json',
                success: function(response) {
                    $('#addProductModal').modal('hide');
                    $('#addName').val(''); // 清空名称输入框
                    $('#addDescription').val(''); // 清空描述输入框
                    $('#addImgPreview').attr('src', '#'); // 清空图片预览
                    $('#addImg').val(''); // 清空隐藏的图片 URL 输入框
                    loadProducts(); // 刷新商品列表
                },
                error: function(xhr, status, error) {
                    console.error('添加商品出错:', error);
                }
            });
        }

        function editProduct(id) {
            $.ajax({
                type: 'GET',
                url: '${pageContext.request.contextPath}/product',
                data: {
                    operation: 'getProductById',
                    id: id
                },
                dataType: 'json',
                success: function(response) {
                    var product = response.data;
                    $('#editId').val(product.id);
                    $('#editName').val(product.name);
                    $('#editDescription').val(product.description);

                    // 设置商品图片预览
                    $('#editImgPreview').attr('src', product.img);
                    // 设置隐藏的图片 URL 输入框
                    $('#editImg').val(product.img);

                    $('#editProductModal').modal('show');
                },
                error: function(xhr, status, error) {
                    console.error('获取商品信息出错:', error);
                }
            });
        }


        function saveProduct() {
            var id = $('#editId').val();
            var name = $('#editName').val();
            var description = $('#editDescription').val();
            var img = $('#editImg').val();

            $.ajax({
                type: 'POST',
                url: '${pageContext.request.contextPath}/product',
                data: {
                    operation: 'updateProduct',
                    id: id,
                    name: name,
                    description: description,
                    img: img
                },
                dataType: 'json',
                success: function(response) {
                    $('#editProductModal').modal('hide');
                    loadProducts(); // 刷新商品列表
                },
                error: function(xhr, status, error) {
                    console.error('更新商品信息出错:', error);
                }
            });
        }

        function deleteProduct(id) {
            if (confirm('确定要删除该商品吗？')) {
                $.ajax({
                    type: 'POST',
                    url: '${pageContext.request.contextPath}/product',
                    data: {
                        operation: 'deleteProduct',
                        id: id
                    },
                    dataType: 'json',
                    success: function(response) {
                        loadProducts(); // 刷新商品列表
                    },
                    error: function(xhr, status, error) {
                        console.error('删除商品出错:', error);
                    }
                });
            }
        }

        // 商品图片上传
        function uploadImage(fileInput, targetImgId, targetHiddenInputId) {
            var formData = new FormData();
            formData.append('file', fileInput.files[0]);

            $.ajax({
                type: 'POST',
                url: '${pageContext.request.contextPath}/file/upload',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    $('#' + targetImgId).attr('src', response); // 更新图片预览
                    $('#' + targetHiddenInputId).val(response); // 更新隐藏的图片 URL 输入框
                },
                error: function(xhr, status, error) {
                    console.error('上传图片出错:', error);
                }
            });
        }
    </script>
</head>
<body>
<div class="container-fluid mt-4">

    <!-- 添加商品按钮 -->
    <button class="btn btn-success mb-3" data-toggle="modal" data-target="#addProductModal">添加商品</button>

    <!-- 商品表格 -->
    <table id="productTable" class="table table-bordered table-hover" >
        <thead>
        <tr>
            <th>ID</th>
            <th>名称</th>
            <th>描述</th>
            <th>图片</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="productTableBody">
        <!-- 商品数据将会动态填充在这里 -->
        </tbody>
    </table>

</div>

<!-- 添加商品的模态框 -->
<div class="modal fade" id="addProductModal" tabindex="-1" role="dialog" aria-labelledby="addProductModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addProductModalLabel">添加商品</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="addName">名称</label>
                        <input type="text" class="form-control" id="addName" name="name">
                    </div>
                    <div class="form-group">
                        <label for="addDescription">描述</label>
                        <textarea class="form-control" id="addDescription" name="description"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="addImg">图片</label>
                        <input type="file" class="form-control-file" id="addImgFile" name="img" onchange="uploadImage(this, 'addImgPreview', 'addImg')">
                        <img id="addImgPreview" class="img-thumbnail mt-2" width="100" height="100" src="#" alt="商品图片预览">
                        <input type="hidden" id="addImg" name="img">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="addProduct()">添加</button>
            </div>
        </div>
    </div>
</div>

<!-- 编辑商品的模态框 -->
<div class="modal fade" id="editProductModal" tabindex="-1" role="dialog" aria-labelledby="editProductModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editProductModalLabel">编辑商品</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <input type="hidden" id="editId" name="id">
                    <div class="form-group">
                        <label for="editName">名称</label>
                        <input type="text" class="form-control" id="editName" name="name">
                    </div>
                    <div class="form-group">
                        <label for="editDescription">描述</label>
                        <textarea class="form-control" id="editDescription" name="description"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="editImg">图片</label>
                        <input type="file" class="form-control-file" id="editImgFile" name="img" onchange="uploadImage(this, 'editImgPreview', 'editImg')">
                        <img id="editImgPreview" class="img-thumbnail mt-2" width="100" height="100" src="#" alt="商品图片预览">
                        <input type="hidden" id="editImg" name="img">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="saveProduct()">保存</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>
